<template>
  <div class="splash">
    <div class="splash-content">
      <h1>MindCare AI</h1>
      <p>专业的AI心理健康支持平台</p>
      <div class="splash-buttons">
        <button @click="goToAuth" class="primary-btn">开始使用</button>
        <button @click="goToAuth" class="secondary-btn">登录/注册</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Splash',
  methods: {
    goToAuth() {
      this.$router.push('/auth')
    }
  }
}
</script>

<style scoped>
.splash {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f7f4f1 0%, #e9e3db 100%);
}

.splash-content {
  text-align: center;
  color: #7a5232;
}

.splash-content h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #7a5232;
}

.splash-content p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #a88b6a;
}

.splash-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.primary-btn, .secondary-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.primary-btn {
  background: #8b5c37;
  color: #fff;
}

.primary-btn:hover {
  background: #7a5232;
  transform: translateY(-2px);
}

.secondary-btn {
  background: transparent;
  color: #7a5232;
  border: 2px solid #7a5232;
}

.secondary-btn:hover {
  background: #7a5232;
  color: #fff;
  transform: translateY(-2px);
}
</style> 